<template>
  <div class="page-wrapper d-flex flex-column">
    <div class="header">
      <MyButton class="add" icon="el-icon-plus" @click="handleAddRole">
        {{ $t("yonghuguanli.addRole") }}
      </MyButton>
    </div>
    <MyTable
      :data="tableData"
      style="width: 100%"
      :default-sort="{ prop: 'date', order: 'descending' }"
    >
      <el-table-column
        type="index"
        :label="$t('common.order_number')"
        sortable
        width="180"
      ></el-table-column>
      <el-table-column
        prop="group_name"
        :label="$t('yonghuguanli.role_simple_name')"
        sortable
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="create_time"
        :label="$t('yonghuguanli.create_time')"
        sortable
        min-width="180"
      ></el-table-column>
      <el-table-column :label="$t('common.operate')" min-width="180">
        <template slot-scope="scope">
          <MyButton
            class="text"
            @click="handleShow(scope.row)"
            type="text"
            size="small"
            >{{ $t("common.view") }}</MyButton
          >
          <span class="ml-10 mr-10" v-if="scope.row.group_name !== 'admin'"
            >|</span
          >
          <MyButton
            class="text"
            v-if="scope.row.group_name !== 'admin'"
            @click="handleEdit(scope.row)"
            type="text"
            size="small"
            >{{ $t("common.edit") }}</MyButton
          >
          <span class="ml-10 mr-10" v-if="scope.row.group_name !== 'admin'"
            >|</span
          >
          <MyButton
            class="text"
            v-if="scope.row.group_name !== 'admin'"
            type="text"
            size="small"
            @click="handleDelete(scope.row)"
            >{{ $t("common.delete") }}</MyButton
          >
        </template>
      </el-table-column>
    </MyTable>
    <AddRoleDialog
      :visible.sync="isAddRoleDialogShow"
      :type="editType"
      @getList="getRoleList"
      :row="row"
    />
    <RoleDetailDialog :visible.sync="isRoleDetailShow" :row="row" />
  </div>
</template>

<script>
import AddRoleDialog from "./AddRoleDialog.vue";
import MyButton from "@/components/Button";
import { deleteRole, getRoleList } from "./service";
import RoleDetailDialog from "./RoleDetailDialog.vue";
export default {
  components: {
    MyButton,
    AddRoleDialog,
    RoleDetailDialog,
  },
  data() {
    return {
      tableData: [],
      row: {},
      isAddRoleDialogShow: false,
      editType: "add",
      isRoleDetailShow: false,
    };
  },
  mounted() {
    this.getRoleList();
    this.getResourceList();
  },
  methods: {
    getResourceList() {},
    handleAddRole() {
      this.isAddRoleDialogShow = true;
      this.editType = "add";
      this.row = {};
    },
    async getRoleList() {
      const res = await getRoleList();
      this.tableData = res.data.result;
    },
    handleShow(row) {
      this.isRoleDetailShow = true;
      this.row = {...row};
    },
    handleEdit(row) {
      this.isAddRoleDialogShow = true;
      this.editType = "edit";
     this.row = {...row};
    },
    handleDelete(row) {
      this.$confirm(
        this.$t("yonghuguanli.deleteRolePromit"),
        this.$t("yonghuguanli.delete_role"),
        {
          confirmButtonText: this.$t("common.deleteConfirm"),
          cancelButtonText: this.$t("common.cancel"),
          type: "warning",
        }
      )
        .then(async () => {
          const params = {
            group_id: row.group_id,
          };
          const res = await deleteRole(params);
          if (res.code == 0) {
            this.$notify({
              title: this.$t("common.success"),
              message: this.$t("common.deleteSuccess"),
            });
            this.getRoleList();
          }
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="less" scoped>
.page-wrapper {
  width: 100%;
}
</style>
